16 斑马智行-全部

零客户端体积（Zero Bundle Size） 如果你在 RSC 中使用了体积庞大的第三方库（比如用来解析 Markdown 的 marked 或处理日期的库），这些库的 JS 代码永远不会被发送到客户端。它们只在服务端运行，极大减轻了浏览器的下载和解析负担。
直接访问后端资源 RSC 允许你直接在组件内部编写数据库查询、读取服务器文件系统或调用内部微服务。你不再需要为了获取数据而专门写一套 API 接口，大大简化了开发流程。
更优的初始加载体验 RSC 配合流式渲染（Streaming），可以让浏览器边接收数据边渲染页面。相比传统方式需要等待所有 JS 下载完才能交互，RSC 能让用户更快看到页面内容，减少白屏时间。

服务端组件 (RSC) vs 客户端组件 (Client Components)

在 RSC 架构下，React 组件被明确划分为了两种类型。在现代框架（如 Next.js）中，默认所有组件都是服务端组件。

特性	服务端组件 (RSC)	客户端组件 (Client Components)
执行位置	仅在服务端	浏览器 (客户端)
代码打包	不打包进客户端 JS	打包并发送到客户端
数据获取	可直接查询数据库/文件系统	需通过 API 请求 (fetch/axios)
交互能力	不支持 (`onClick` 等无效)	支持完整交互与事件监听
React Hooks	不支持 (`useState`, `useEffect`)	支持所有 Hooks
声明方式	默认 (无需特殊标记)	需在文件顶部添加 `'use client'`

代码实战演示

服务端组件 (默认)

可以直接在组件里进行异步数据库查询，且引入的大型依赖不会增加前端体积：

import { db } from '@/lib/db';
import marked from 'marked'; // 这个库只留在服务端，不会下发给浏览器

export default async function ArticlePage({ params }) {
  // 直接在组件内异步获取数据
  const article = await db.article.findUnique({ where: { id: params.id } });
  const htmlContent = marked(article.content);

  return (
    <article>
      <h1>{article.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
    </article>
  );
}

客户端组件 (需声明 'use client')

当页面需要点击、输入框、倒计时等交互时，就需要使用客户端组件：

'use client'; // 必须显式声明

import { useState } from 'react';

export function LikeButton() {
  const [likes, setLikes] = useState(0);
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes}
    </button>
  );
}

总结与补充

RSC 并不是要完全取代传统的 SSR（服务端渲染）或 CSR（客户端渲染），而是将两者的优势结合了起来。它把**"展示和数据获取"交给服务端，把"交互和状态管理"**交给客户端。

目前，Next.js (App Router) 是对 RSC 支持最成熟的主流框架，它默认采用 RSC 架构来构建应用。掌握 RSC 的核心在于学会**"何时使用服务端组件，何时切换到客户端组件"**，从而在性能和交互体验之间找到最佳平衡。

我他妈的，两个面试都过了，最后的hr给我挂了，因为我去的太晚了，666